{*
TODO: this block isn't actually used for anything at the moment; need to figure out how to imports and parameters properly

TODO: add additional checks to these UnderlineNav buttons to ensure only valid URLs can be generated
      e.g. selecting the "Ugoira" button hides the buttons under
          "Specialized rankings" as well as the "Monthly" and "Rookie"
          options under "Time frame", but this doesn't occur vice versa
          with the "Ugoira" button still visible if either of the latter
          buttons are selected, thus allowing the user to generate an invalid
          URL even when there is no UX indication that this is the case
*}

{* Defining this as a block rather than a fragment because imports that require going to higher directories doesn't seem possible *}

<div class="d-none">
  <p>Daily</p>
  <p>Weekly</p>
  <p>Monthly</p>
  <p>Rookie</p>
  <p>Overall</p>
  <p>Illustrations</p>
  <p>Ugoira</p>
  <p>Manga</p>
  <p>Daily (R-18)</p>
  <p>Weekly (R-18)</p>
  <p>Original</p>
  <p>Popular among males</p>
  <p>Popular among females</p>
</div>

{{- block RankingOptions() }}
  {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
  {{- Content := isset(Queries.content) ? Queries.content : "all" }}
  {{- url := "" }}
  {{- if Mode == "original" || Mode == "male" || Mode == "female" || Mode == ""}}
    {{ url = "/ranking?date=" + .Data.CurrentDate + "&page=1&content=" }}
  {{- else }}
    {{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
  {{- end }}
  <div class="row border-bottom border-2 mb-4">
    <div class="col-12">
      <h3><i class="bi bi-collection-fill me-2"></i>Content type</h3>
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Content types">
        {{- path := slice("all", "illust", "manga", "ugoira") }}
        {{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
        {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
      </div>
      <p class="small text-body-secondary mb-4">Select the type of content you want to see in the rankings.</p>
    </div>
  </div>

  <div class="row mb-4">
    <div class="col-12 col-md-6">
      <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
      {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
      {{- if Content != "ugoira" }}
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
        {{- path := slice("daily", "weekly", "monthly", "rookie") }}
        {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
        {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
      </div>
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
        {{- path := slice("daily_r18", "weekly_r18") }}
        {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
        {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
      </div>
      {{- else }}
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
        {{- path := slice("daily", "weekly") }}
        {{- name := slice("Daily", "Weekly")}}
        {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
      </div>
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
        {{- path := slice("daily_r18", "weekly_r18") }}
        {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
        {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
      </div>
      {{- end }}
      <p class="small text-body-secondary">Choose the time frame for the rankings.</p>
      <p class="small text-body-secondary mb-4 mb-md-0">
        <span class="fw-bold">Monthly</span> and <span class="fw-bold">Rookie</span> are unavailable when filtering for <span class="fw-bold">Ugoira</span>.
      </p>
    </div>

    <div class="col-12 col-md-6">
      {{- if Content == "all" }}
      <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
        {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
        {{- path := slice("original") }}
        {{- name := slice("Original")}}
        {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
      </div>
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
        {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
        {{- path := slice("male", "female") }}
        {{- name := slice("Popular among males", "Popular among females")}}
        {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
      </div>
      <p class="small text-muted">Specialized ranking categories.</p>
      <p class="small text-muted mb-0">These options are only available when filtering for <span class="fw-bold">Overall</span>.</p>
      {{- end }}
      </div>
    </div>

  <div class="row">
    <div class="col-12 d-flex justify-content-between">
      <a href="/ranking" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
      <button type="button" class="custom-btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
  </div>
{{- end }}
